<style lang="less" scoped>
  .guide-time{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="guide-time">
    <div class="guide-time_title">
      <span>{{ guideTitle }}</span>
    </div>
    <div v-if="isShow" id="guideTime" class="guide-time_content" />
    <div v-else class="no-data">
      暂无数据
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAvgD2BMonth, getAvgDNTMonth } from '@/api/comprehensive/guideTime'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      guideTitle: '入门到导丝通过时间',
      isShow: true,
      interVal: null
    }
  },
  watch: {
    'isStrock'() {
      this.getChartData()
    }
  },
  mounted() {
    this.getChartData()
    this.interVal = setInterval(() => {
      this.getChartData()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.interVal)
  },
  methods: {
    getChartData() {
      this.isShow = true
      let myChart = echarts.init(document.getElementById('guideTime'))
      // myChart.clear()
      window.addEventListener('resize', myChart.resize)
      let timeLine = []
      let thisYearD2B = []
      let lastYearD2B = []
      if (this.isStrock == 'chestPain') {
        this.guideTitle = '入门到导丝通过时间'
        getAvgD2BMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.isShow = true
              res.data.forEach(el => {
                timeLine.push(el.month)
                thisYearD2B.push(el.avgD2BThisYear)
                lastYearD2B.push(el.avgD2BLastYear)
              })
              let option = {
                color: ['#59BCFB', '#01EEF6'],
                legend: {
                  type: 'plain',
                  top: 0,
                  icon: 'circle',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                grid: {
                  top: '20%',
                  letf: '10%',
                  bottom: '20%'
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  data: timeLine
                },
                yAxis: [{
                  name: '（时间）',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}'
                },
                series: [
                  {
                    name: 'STEMI到D2W的时间',
                    type: 'line',
                    smooth: true,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: thisYearD2B
                  },
                  {
                    name: '去年',
                    type: 'line',
                    smooth: true,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: lastYearD2B
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              this.isShow = false
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.guideTitle = '缺血性卒中DNT中位数时间'
        getAvgDNTMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.isShow = true
              res.data.forEach(el => {
                timeLine.push(el.month)
                thisYearD2B.push(el.avgDNTThisYear ? el.avgDNTThisYear : 0)
                lastYearD2B.push(el.avgDNTLastYear ? el.avgDNTLastYear : 0)
              })
              let option = {
                color: ['#59BCFB', '#01EEF6'],
                legend: {
                  type: 'plain',
                  top: 0,
                  icon: 'circle',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                grid: {
                  top: '20%',
                  letf: '10%',
                  bottom: '20%'
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  data: timeLine
                },
                yAxis: [{
                  name: '（时间）',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}'
                },
                series: [
                  {
                    name: '中位数时间',
                    type: 'line',
                    smooth: true,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: thisYearD2B
                  },
                  {
                    name: '去年',
                    type: 'line',
                    smooth: true,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: lastYearD2B
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              this.isShow = false
            }
          }
        })
      }
    }
  }
}
</script>
